/* 
1 查询成绩
    去打开页面的调用第一个函数 发送请求 获取数据 渲染页面
2 修改成绩
    1双击 单元格 开始修改
        1 找准元素 score类 再去绑定双击事件- 有些元素不需要双击事件
        2 双击事件触发了
        3 控制单元格对应的input标签显示 即可
        4 控制input标签 里面的value = 单元格里面的内容
        5 控制被点击的input标签 获得焦点！！ focus()
    2 失去焦点 结束修改
        1 给input标签绑定 失去焦点事件
        2 获取到输入框里面的内容，拼接成参数 发送给后端 完成编辑
        3 后端响应 编辑成功 
            1 弹出一个提示
            2 重新获取最新数据
*/
const tbody = document.querySelector('tbody');

function getScoreList() {
    axios.get('/score/list').then(e => {
        //渲染到页面上
        const obj = e.data.data;
        // console.log(obj);
        let html = ''; //不给他空字符串就是undefined  undefined报错暂停执行
        if (e.data.code === 0) {
            //遍历对象
            // Array.reduce((h, v) => {}, '')
            for (const key in obj) {
                //拿到多次成绩值
                const tempHtml = obj[key].score.reduce((h, v, i) =>
                    h + `<td class="score" >${v} <input type="text" data-id='${key}' data-batch='${i+1}'> </td>`, '');
                html += `<tr>
                <th scope="row" >${key}</th>
                <td>${obj[key].name}</td>
                ${tempHtml}
                </tr>`;
            };
            tbody.innerHTML = html;
            //失去焦点事件 因blur只能在表单中生效 所有只能给表单绑定该事件 而因为回调函数具有延时性效果 所有 写在外面没办法写在拿到input
            //写在回调函数已经生成了input的下面
            const inputs = document.querySelectorAll('tbody input');//拿到所有的input
            inputs.forEach(v => {//拿到每一个input===v
                v.addEventListener('blur', function (e) {//每一个绑定失去焦点事件
                    const data = {
                        stu_id: v.dataset.id,//在input自定义属性 
                        batch: v.dataset.batch,//批次 数组元素下标+1
                        score: v.value,//每个input的值
                    }
                    // debugger
                    axios.post('/score/entry', data).then((e) => {
                        if (e.data.code === 0) {
                            toastr.success('数据更新成功');
                            getScoreList();
                        };
                    });
                });
            });
        };
    });
};
getScoreList()


// 分数修改
tbody.addEventListener('dblclick', function (e) {
    const dom = e.target;
    if (dom.nodeName === 'TD' && dom.classList.contains('score')) { //不是所有的td标签里面的input都需要修改 而是 有包含score且是td的才能修改
        const input = dom.querySelector('input') //获取到点击时候的元素标签 里面的input
        input.style.display = 'block'; //双击的时候 input显示出来
        input.value = dom.innerText; //输入的文本===input的值
        input.focus(); //焦点聚焦
    }
})